<template>
  <div v-has="'menu_query'" class="user-manager">
    <div class="query-form">
      <query-form
        :form="searchForm"
        v-model="menuForm"
        @handleQuery="handleQuery"
        @handleReset="handleReset"
      />
      <!-- <el-form
        :model="menuForm"
        label-width="120px"
        ref="query_form"
        style="display: flex"
      >
        <div class="query" style="display: flex">
          <el-form-item label="菜单名称" prop="userName">
            <el-input
              v-model="menuForm.userName"
              placeholder="请输入菜单名称"
            />
          </el-form-item>
          <el-form-item label="菜单状态" prop="menuState">
            <el-select v-model="menuForm.menuState" placeholder="状态">
              <el-option label="正常" :value="1" />
              <el-option label="停用" :value="2" />
            </el-select>
          </el-form-item>
        </div>

        <div class="clickQuery" style="margin-left: 30px; width: 200px">
          <el-button type="primary" @click="screeningUser">查询</el-button>
          <el-button @click="query_reset">重置</el-button>
        </div>
      </el-form> -->
    </div>

    <div class="base-table">
      <list-table
        :columns="columns"
        :tableList="menuList"
        :btnList="btnList"
        @userCreate="userCreate"
        @onuserEdit="onuserEdit"
        @userDel="userDel"
      />
      <pagination :total="total" @handleCurrentChange="handleCurrentChange" />

      <!-- <div class="action">
        <el-button type="primary" v-has="'menu-create'" @click="menuAdd(1)"
          >新增</el-button
        >
      </div>

      <el-table
        ref="multipleTableRef"
        :data="menuList"
        style="width: 100%"
        row-key="_id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button
              type="primary"
              @click="menuAdd(2, scope.row)"
              v-has="'menu-create'"
              >新增</el-button
            >
            <el-button v-has="'menu-edit'" @click="menuEdit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="Yes"
              cancel-button-text="No"
              title="Are you sure to delete?"
              @confirm="menuDel(scope.row)"
            >
              <template #reference>
                <el-button type="danger" v-has="'menu-delete'">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table> -->
    </div>

    <el-dialog v-model="showMadol" :title="title">
      <el-form ref="dialogForm" :model="menuForm" :rules="rules">
        <el-form-item label="父级菜单" prop="parentId">
          <el-cascader
            v-model="menuForm.parentId"
            :options="menuList"
            placeholder="请选择"
            :props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
            clearable
          />
          <span> 不选，默认第一级别 </span>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="menuForm.menuType">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="menuForm.menuName" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="菜单图标"
          prop="icon"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.icon" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="路由地址"
          prop="path"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.path" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="组件路径"
          prop="component"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.component" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="菜单状态"
          prop="menuState"
          v-show="menuForm.menuType === 1"
        >
          <el-radio-group v-model="menuForm.menuState">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="权限标识"
          prop="menuCode"
          v-show="menuForm.menuType === 2"
        >
          <el-input v-model="menuForm.menuCode" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import api from './../api'
import utils from './../utils/utils.js'
import message from '../utils/message.js'
import { ref, reactive, toRaw, nextTick } from 'vue'
// 显示按钮
let btnList = reactive({
  tbTopBtn: [{
    type: 'primary',
    text: '新增',
    id: 1,
    row: '',
    has: 'user-create',

  }],
  tableBtn: [
    {
      type: 'primary',
      text: '新增',
      id: 4,
      row: ''
    },
    {
      type: '',
      text: '编辑',
      id: 3,
      row: ''
    }, {
      type: 'danger',
      text: '删除',
      id: 2,
      row: ''
    },
  ],
})
// 显示搜索表单
const searchForm = [
  {
    type: 'input',
    label: '菜单名称',
    prop: 'userName',
    placeholder: '请输入菜单名称'
  },
  {
    type: 'select',
    label: '菜单状态',
    prop: 'menuState',
    placeholder: '状态',
    option: [
      {
        value: 1,
        label: '正常'
      },
      {
        value: 2,
        label: '停用'
      },
    ]
  },
]
// 定义动态表格
let columns = reactive([
  {
    label: '菜单名称',
    prop: 'menuName'
  },
  {
    label: '图标',
    prop: 'icon'
  },
  {
    label: '菜单类型',
    prop: 'menuType',
    formatter (row, colum, value) {
      return {
        1: '菜单',
        2: '按钮',
      }[value]
    }
  },
  {
    label: '权限标识',
    prop: 'menuCode'
  },
  {
    label: '路由地址',
    prop: 'path'
  },
  {
    label: '组件路径',
    prop: 'component'
  },
  {
    label: '菜单状态',
    prop: 'menuState',
    formatter (row, colum, value) {
      return {
        1: '正常',
        2: '停用',
      }[value]
    }
  },
  {
    label: '创建时间',
    prop: 'createTime',
    formatter: (row, colum, value) => {
      return utils.formateDate(new Date(value))
    }
  }
])
// 定义显示页码数
let total = ref(10)
// 定义查询表单query_form的节点
let query_form = ref(null)
// 获取弹窗表单dialogmenuForm节点
let dialogForm = ref(null)
// 弹窗表单校验
let rules = reactive({
  menuName: [
    {
      required: true,
      message: "请输入菜单名称",
      trigger: "blur",
    },
    {
      min: 2,
      max: 10,
      message: "长度在2-8个字符",
      trigger: "blur",
    },
  ],
})
// 定义记录用户行为
const action = ref('add')
// 定义弹窗显示
let showMadol = ref(false)
// 定义弹窗文本
let title = ref('新增菜单')
// 定义菜单列表
const menuList = ref([])
// 定义菜单列表请求参数，初始化表单
let menuForm = reactive({
  parentId: [null],
  menuType: 1,
  menuState: 1
})
// 定义初始化分页
let pager = reactive({
  pageNum: 1,
  pageSize: 10
})

// 获取菜单列表请求
const getMenuList = () => {
  api.getMenuList(menuForm).then(res => {
    menuList.value = toRaw(res)
    total.value = res.length
  })
}

// 表单重置
const resetForm = () => {
  dialogForm.value.resetFields()
  handleReset()
}
// 新增
const userCreate = (val) => {
  console.log(val);
  action.value = 'add'
  showMadol.value = !showMadol.value
  if (val.msg == 4) {
    menuForm.parentId = [...val.row.parentId, val.row._id].filter(ele => ele)
  }
}
// 编辑
const onuserEdit = (val) => {
  action.value = 'edit'
  showMadol.value = !showMadol.value
  nextTick(() => {
    Object.assign(menuForm, val.row)
  })
}
// 删除
const userDel = (val) => {
  action.value = 'delete'
  let data = { _id: val._id, action: action.value }
  api.postMenuOperate(data).then(res => {
    message.message('删除成功!', 'success')
    getMenuList()
  })
}
// 弹窗取消
const handleCancel = () => {
  resetForm()
  showMadol.value = !showMadol.value
}
// 弹窗确定
const handleSubmit = () => {
  dialogForm.value.validate((vaild) => {
    if (vaild) {
      let data = toRaw(menuForm)
      data.action = action.value
      console.log(data);
      api.postMenuOperate(data).then(res => {
        console.log(res);
        message.message('提交成功!', 'success')
      })
      // 发送添加请求
      // 获取menuForm + action 发送请求
      // 重置表单
      resetForm()
      // 关闭弹窗
      showMadol.value = !showMadol.value
      // 重新请求menuList,渲染数据
      getMenuList()
    }
  })
}
// 查询
const handleQuery = (val) => {
  let data = {
    menuName: val.value.userName,
    menuState: val.value.menuState
  }
  api.getMenuList(data).then(res => {
    menuList.value = toRaw(res)
    message.message('查询成功!', 'success')
  })
}
// 重置
const handleReset = (val) => {
  message.message('重置成功!', 'success')
  getMenuList()
}
// 分页切换
const handleCurrentChange = async (val) => {
  let data = { ...menuForm, ...pager }
  data.pageNum = val
  let { list } = await api.getMenuList(data)
  menuList.value = list
}
getMenuList()
</script>

<style lang="scss" scoped>
.user-manager {
  .query-form {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .base-table {
    margin-top: 20px;
    border-radius: 5px;
    .action {
      padding: 20px;
      background-color: #fff;
      border-bottom: 1px solid #eef0f3;
    }
    .page {
      margin: 10px auto;
      float: right;
    }
  }
}
</style>